<template>
  <el-drawer v-model="table" title="编辑轮播图" direction="rtl"
   size="50%" v-on:close="Load()">
    <el-form :model="form" label-width="120px">
      <el-form-item label="轮播图图片">

   
        <el-upload 
        :file-list="[{name:'',url: ReadImageSrc+table.data.banner_src}]"
        action="#" :auto-upload="false"
             :http-request="false" list-type="picture-card" 
             :on-change="handlePictureCardPreview"
             :on-preview="handlePreview"
             :on-remove="handleRemove" limit="1">
      </el-upload>
    
      <el-dialog v-model="dialogVisible">
        <img w-full style="height: 50vh;" :src="ReadImageSrc+table.data.banner_src" alt="Preview Image" />
      </el-dialog>
       
      </el-form-item>
    </el-form>
    <el-button type="success" v-on:click="Edit()">编辑</el-button>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Load,getBase64,Upload,CloseUpload } from '/src/style.js'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import {EditBanner} from '/src/service/Banner.js'
import {ReadImageSrc} from  '/src/config.js'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)


//*文件上传
const UploadFile = ref()
const UploadName = ref()
const CloseUploadName = ref()

const form = ref()


const props = defineProps({
  data: Object,
})

const table = ref(props)


const EditBannerList = ref()



//*图片上传成功获取图片路径
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile,fileList) => {

  EditBannerList.value = uploadFile.name
  getBase64(uploadFile.raw).then(res => {
       const params = res.split(',') //*分割类型和base64内容
       UploadFile.value = params[1]
       console.log(uploadFile)
       UploadName.value = uploadFile.name
       const data ={name:uploadFile.name,size:uploadFile.size,file:params[1],type:uploadFile.raw.type}
       Upload(data)
     })
}
//*文件移除时
const handleRemove =(uploadFile)=>
{
     CloseUploadName.value = uploadFile.name
     const data = {name:CloseUploadName.value,type:uploadFile.raw.type}
     CloseUpload(data)
}
//*预览图片
const handlePreview =() =>
{
     dialogVisible.value = true
}




// 编辑
const Edit = () =>{
  const data = {Id:props.data.banner_id,Banner_src:EditBannerList.value}
  EditBanner(data).then((res)=>{

  })
}
</script>


<style></style>